<template>
	<h1>Todo-List</h1>
	<input
	 @keyup.enter = 'setTodoValue'
	 v-model="todoValue"
	 type="text"/>
</template>

<script lang="ts">
	import {defineComponent, ref} from 'vue';
	import {useTodo, IUseTodo} from '@/hooks'
	
	export default defineComponent({
		name:'TodoInput',
		setup(){
			const todoValue = ref<string>('');
			//
			const {setTodo}: IUseTodo = useTodo();
			const setTodoValue = () => {
				if(todoValue.value.trim().length != 0){
					setTodo(todoValue.value)
				}
			};
			
			
			return{
				todoValue,
				setTodoValue,
			}
		},
	})
</script>

<style>
</style>
